<template>
  <a-card :bordered="false">
    <a-row :gutter="24">
      <a-form :form="form" @submit="handleSubmit">
        <a-col :md="12">
          <a-form-item v-bind="formItemLayout" label="名称">
            <a-input
              placeholder="请输入名称"
              v-decorator="['mingCheng',{
                rules: [
                  {
                    required: true,
                    message: '名称不能为空',
                  },
                ],
              }]"
            />
          </a-form-item>
        </a-col>
        <a-col :md="12">
          <a-form-item v-bind="formItemLayout" label="所属库房">
            <a-select
              disabled
              placeholder="请选择所属库房"
              v-decorator="['kuFangHangBiaoShi',{
                  rules: [
                    {
                      required: true,
                      message: '所属库房不能为空',
                    },
                  ],
                }]"
            >
              <a-select-option
                v-for="item in kuData"
                :key="item.id"
                :value="item.id"
              >{{item.mingCheng}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12">
          <a-form-item v-bind="formItemLayout" label="父级标识">
            <a-tree-select
              v-decorator="['fuJieDianBiaoShi']"
              show-search
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="请选择父级标识"
              allow-clear
              tree-default-expand-all
              @change="onChangeTree"
            >
              <a-tree-select-node
                v-for="item in treeData"
                :key="item.id"
                :value="item.id"
                :title="item.mingCheng"
              >
                <a-tree-select-node
                  v-for="items in item.childList"
                  :key="items.id"
                  :value="items.id"
                  :title="items.mingCheng"
                >
                  <a-tree-select-node
                    v-for="itemss in items.childList"
                    :key="itemss.id"
                    :value="itemss.id"
                    :title="itemss.mingCheng"
                  />
                </a-tree-select-node>
              </a-tree-select-node>
            </a-tree-select>
          </a-form-item>
        </a-col>
        <!-- <a-col :md="12">
          <a-form-item v-bind="formItemLayout" label="序号">
            <a-input-number
              style="width: 100%"
              id="inputNumber"
              placeholder="请输入序号"
              v-decorator="['ciXu',{
                  rules: [
                    {
                      required: true,
                      message: '序号不能为空',
                    },
                  ],
                }]"
              :min="1"
            />
          </a-form-item>
        </a-col>-->
        <a-col :md="24">
          <a-form-item v-bind="formItemLayout2" label="说明">
            <a-textarea placeholder="请输入说明" :rows="4" v-decorator="['beiZhu']" />
          </a-form-item>
        </a-col>
        <a-col :md="24">
          <div class="antBtn">
            <a-button type="primary" html-type="submit">保存</a-button>
            <a-button type="primary" style="margin-left:8px" @click="fanHui">返回</a-button>
          </div>
        </a-col>
      </a-form>
    </a-row>
  </a-card>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import JDate from '@/components/jeecg/JDate'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
export default {
  name: 'KuFangNew',
  components: {
    JDate,
    JSelectMultiUser,
  },
  data() {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      formItemLayout2: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 },
        },
      },
      form: this.$form.createForm(this, { name: 'register' }),
      kuData: [],
      treeData: [],
      fj: this.$route.query.fj,
      isO: false,
    }
  },
  created() {
    this.form.resetFields()
    this.mlName()
    const {
      form: { setFieldsValue },
    } = this
    this.$nextTick(() => {
      setFieldsValue({
        kuFangHangBiaoShi: this.$route.query.keys,
        fuJieDianBiaoShi: this.fj,
      })
    })
  },
  methods: {
    // 库房
    mlName() {
      getAction('/kfKuFang/findKuFang', {}).then((res) => {
        if (res.code == 200) {
          this.kuData = res.result
          getAction(`/kfDangAnGui/tree?kuFangId=${this.$route.query.keys}`, {}).then((res) => {
            if (res.code == 200) {
              this.treeData = res.result
            } else {
              this.$message.error(res.message)
            }
          })
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 提交
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          if (this.isO) {
            values.fuJieDianBiaoShi = values.fuJieDianBiaoShi
          } else {
            values.fuJieDianBiaoShi = values.fuJieDianBiaoShi.join()
          }
          let body = values
          postAction('/kfDangAnGui/add', { ...body }).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.message)
              this.$router.push({ path: '/kufang' })
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    },
    // 返回
    fanHui() {
      this.$router.push({ path: '/kufang' })
    },
    // 门类树选择
    onChangeTree(value) {
      this.isO = true
    },
  },
}
</script>

<style lang="less">
.antBtn {
  text-align: right;
  margin: 30px auto 0;
}
.transfer {
  text-align: center;
}
.transfer .ant-transfer-list {
  text-align: left;
}
.transfer .ant-transfer-operation {
  margin: 0 48px;
}
.transfer-Se {
  text-align: center;
}
.transfer-Se .ant-select {
  position: relative;
  top: -50px;
}
.antAdd {
  font-size: 24px;
  cursor: pointer;
}
.antAdd span:nth-child(2) {
  margin-left: 30px;
}
</style>